<template>
  <div>
    <el-container>
      <el-header>
        <Header :homedata="homeData" />
      </el-header>
      <el-container>
        <el-aside :width="homeData.leftWidth+'px'" :style="{height:height+'px',borderRight: '1px solid gray'}" >
          <Left :homedata="homeData"/>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer height="40px">
            <Footer/>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>

  import Header from "./Header.vue"
  import Left from "./Left.vue"
  import Footer from "./Footer.vue"

  export default {

    components: {
      Header,
      Left,
      Footer
    },
    data() {
      return {
        height: 0,
        homeData:{
          isCollapse:false,
          leftWidth:200
        }
      }
    },
    mounted() {
      this.height = document.documentElement.clientHeight - 70;
      var that = this;
      window.onresize = function () {
        that.height = document.documentElement.clientHeight - 70;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .el-header {
    background: #409EFF;
    padding: 0;
  }

  .el-aside {
  }

  .el-main {
  }

  .el-footer {
  }
</style>
